<ion-header no-border>
  <ion-navbar>
    <ion-title left (click)="showDate(isShowDate)">
      全部订单({{datasNum}})
      <i class="fa fa-angle-down ml5 font_gray"></i>
    </ion-title>
    <ion-buttons left>
      <button ion-button icon-only class="font_size_large ml20" (click)="mapDisplatOrder()">
        <i class="fa fa-map"></i>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button class="bgcolor_white" (click)="selectAZRY()">
        <span *ngIf="azlist.length==0">无辅助人员</span>
        <span *ngFor="let work of azlist">{{work.VALUE}}&nbsp;</span>
      </button>
    </ion-buttons>
  </ion-navbar>

  <ng-container *ngIf="userInfo.SFZX!='0'">
    <div class="jl_model_prolist" style="top:46px;" [class.hide]="isShowDate == 0">
      <div class="w12  jl_model_main">
        <div class="w12 jl_model_promain" style="height: 70% ;!important;">
          <div style="height: calc(100% - 55px);">
            <h3 class="w12 tc bor_bottom pt10 pb10">选择预约日期</h3>
            <div class="w12">
              <date-picker (change)="change($event)"></date-picker>
            </div>
          </div>
          <div class=" address_footer" style="background:none;">
            <button class="w06 add_ljgm_btn" (click)="exit()" ion-button>取消</button>
            <button class="w06 add_ljgm_btn" (click)="searchOrderByTime()" ion-button>确定</button>
          </div>
        </div>
        <div class="w12 jl_model_proclose" style="height: 100% ;!important;" (click)="exit()"></div>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="userInfo.SFZX!='0'">
    <div class="list_search_header">
      <input placeholder="搜索服务订单，可模糊搜索" [(ngModel)]="query_field">
      <span (click)="ionViewWillEnter()">搜索</span>
    </div>
  </ng-container>
</ion-header>

<ion-content (ionScroll)="scrollContent()">

  <ion-refresher (ionRefresh)="refresh($event)" pullMax="300"
                 [enabled]="userInfo.SFZX!='0'"
                 [ngClass]="{'t95':userInfo.SFZX!='0'}">
    <ion-refresher-content
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="正在刷新...">
    </ion-refresher-content>
  </ion-refresher>

  <ng-container *ngIf="userInfo.SFZX!='0'">
    <div class="qd_list">
      <ng-container *ngFor="let data of datas; let i = index">
        <div class="qd_item">
          <div class="qd_header bor_bottom">
            <div class="w12 qd_address" *ngIf="dev">
              <em class="mr5">{{data.ID}}&emsp;{{data.DESCRIPTION}}</em>{{data.ADDRESS}}
              <span class="font_size_standard" style="color:red;">{{data.ZCZT}}</span>
            </div>
            <div class="w12 qd_address" *ngIf="!dev" (click)="push('MapNavigationPage',data)">
              <em class="mr5">{{data.ID}}&emsp;{{data.DESCRIPTION}}</em>{{data.ADDRESS}}
              <span style="color:red;">{{data.ZCZT}}</span>
            </div>
            <div class="w12 mt10">
              <span class="w12">
                <span class="w04 tl"><i class="fa fa-user-circle mr5"></i>{{data.NAME}}</span>
                <span class="w04 tc"><i class="fa fa-phone-square mr5"></i>{{data.MOBILE}}</span>
                <span class="w04 tr"><i class="fa fa-clock-o mr5"></i>{{data.YYRQ}} {{data.YYSJD}}</span>
              </span>
              <span class="w03 tl fr mt10" [ngClass]="{'hide':data.SERVICETYPEID!='1'}" (click)="viewQrCode(data.ID)">
                <i class="fa fa-qrcode pl20" style="font-size: 75px"></i>
              </span>
              <span class="w09 tl mt10" [ngClass]="{'hide':data.SERVICETYPEID!='1'}">提货仓库：{{data.THCK}}</span>
              <span class="tl mt10"
                    [ngClass]="{'w06':data.SERVICETYPEID!='1','w05':data.SERVICETYPEID=='1'}"
                    *ngIf="data.GZSC">购置商场：{{data.GZSC}}</span>
              <span class="tl mt10"
                    [ngClass]="{'w06':data.SERVICETYPEID!='1','w04':data.SERVICETYPEID=='1','pl10':data.GZSC&&data.SERVICETYPEID=='1'}"
                    *ngIf="data.CREATOR">开单员：{{data.CREATOR}}{{data.ZDRDH?'('+data.ZDRDH+')':''}}</span>
              <span class="w09 tl mt10">购买时间：{{data.JDRQ}}</span>
              <span class="w12 mt10">
                <span class="w06 tl "><i class="fa fa-file-text mr5"></i>{{data.ORDERID}}</span>
                <span class="w06 tr pr0 font_red ">师傅提成:￥{{data.SFTC ? data.SFTC : 0|money}}</span>
              </span>
              <span class="w12 mt10">
                <span class="w03 tl pr0 " *ngIf="data.GUARANTEE">保修:{{data.GUARANTEE}}</span>
                <span class="w09 tr font_red">备注:{{data.BZ ? data.BZ : '无'}}</span>
              </span>
              <span class="w12 mt10">
                <span class="fr font_red" *ngIf="data.SYCQSJ">剩余超期时间:{{data.SYCQSJ || ''}}</span>
              </span>
            </div>
          </div>
          <div class="qd_body bor_bottom">
            <ng-container *ngFor="let pro of data.CSM_SORDERITEM">
              <div class="w12 mt10">
                <h3 class="w10">{{pro.EXTSKUNAME}}</h3>
                <span class="w02 tr">× {{pro.NUM}}</span>
              </div>
            </ng-container>
          </div>
          <div class="qd_footer">
            <ng-container *ngIf="data.SERVICETYPEID!='1'">
              <button class="mt10" (click)="dispaly(data,i)" *ngIf='!data.isshangmeng'>上门</button>
              <button class="mt10" (click)="push('WorkerLookFinishRepairPage',data)" *ngIf='data.isshangmeng'>完工
              </button>
              <button class="mt10" (click)="activemodel(data)">联系客户</button>
              <button class="mt10" (click)="update(data,i)" *ngIf="CDKG==0">修改工单</button>
              <button class="mt10" (click)="tuidan(data,i)" *ngIf="CDKG==1">撤单</button>
              <ng-container *ngIf="userInfo.GSCS==5">
                <button class="mt10" (click)="posters(data,i)" *ngIf="!data.GDYY&&!data.GDSJZ">挂单</button>
                <button class="mt10" (click)="postersEnd(data,i)" *ngIf="data.GDYY&&!data.GDSJZ">结束挂单</button>
              </ng-container>
              <button class="mt10" (click)="access(data,i)">领料</button>
            </ng-container>
            <ng-container *ngIf="data.SERVICETYPEID=='1'">
              <ng-container *ngIf="userInfo.GSCS==5">
                <button class="mt10" (click)="openpage('WorkerLookFinishDriverPage',data,i)"
                        *ngIf="data.isZC&&data.PICKING">完工
                </button>
                <button class="mt10" (click)="pick(data,i)" *ngIf="!data.PICKING">拣货</button>
                <button class="mt10" (click)="submit(data,i)" *ngIf="data.PICKING&&!data.isZC">装车</button>
              </ng-container>
              <ng-container *ngIf="userInfo.GSCS!=5">
                <button class="mt10" (click)="openpage('WorkerLookFinishDriverPage',data,i)" *ngIf="data.isZC">完工
                </button>
                <button class="mt10" (click)="submit(data,i)" *ngIf="!data.isZC">装车</button>
              </ng-container>
              <button class="mt10" (click)="activemodel(data)">联系客户</button>
              <button class="mt10" (click)="update(data,i)" *ngIf="CDKG==0">修改工单</button>
              <button class="mt10" (click)="tuidan(data,i)" *ngIf="CDKG==1">撤单</button>
              <ng-container *ngIf="userInfo.GSCS==5">
                <button class="mt10" (click)="posters(data,i)" *ngIf="!data.GDYY&&!data.GDSJZ">挂单</button>
                <button class="mt10" (click)="postersEnd(data,i)" *ngIf="data.GDYY&&!data.GDSJZ">结束挂单</button>
              </ng-container>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>

    <div *ngIf="datasConfig.isEnd==true" class="w12 mt20 mb20 tc font_gray">
      ------------------------ 已经到底了 ------------------------
    </div>
    <ion-infinite-scroll (ionInfinite)="getMoreDatas($event)" threshold="100px" [enabled]="!datasConfig.isEnd">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="数据加载中...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ng-container>
  <div [ngStyle]="{'display': userInfo.SFZX == '0'? 'block':'none'}">
    <div style="text-align: center;width: 100%;height: 100%;padding-top: 50%;padding-bottom: 50%">
      <div padding text-center class="pt0">
        <span class="font_gray font_size_standard">未开工无法查看到任何信息哦！</span>
      </div>
      <div padding text-center>
        <button ion-fab (click)="switchIsWorking()" style="margin: 0 auto;width: 120px;height: 120px;font-size: 25px;">
          开工
        </button>
        <!--<i class="fa fa-lock font_gray" style="font-size: 80px;"></i>-->
      </div>
    </div>
  </div>
  <ion-fab bottom right *ngIf="!isScrollDown && !isApp && userInfo.SFZX!='0'">
    <button ion-fab mini color="light" (click)="refresh()">
      <ion-icon name="md-refresh"></ion-icon>
    </button>
  </ion-fab>

</ion-content>
